<template>
    <el-dialog title="添加分类" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-form size="small" :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类图标" prop="image">
                <upload-single-img :imgUrl="ruleForm.image" @removeImg="removeImg(1, $event)"
                    @handleSuccess="handleSuccess(1, $event)" ref="upload"></upload-single-img>
                <p class="toolTip">
                    建议使用尺寸：166*166，否则图片会拉伸变形，影响美观
                </p>
            </el-form-item>
            <el-form-item label="选择分公司" prop="company_id">
                <el-select v-model="ruleForm.company_id" placeholder="请选择分公司" @change="handleSelect">
                    <el-option v-for="item in compony" :key="item.company_id" :label="item.name"
                        :value="item.company_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上级分类" prop="parent_id">
                <el-cascader v-model="ruleForm.parent_id" :options="cateList" :props="{
                    checkStrictly: true,
                    label: 'name',
                    value: 'category_id',
                }" @change="handleCascaderChange" ref="cascader" placeholder="请选择上级分类"></el-cascader>
                <p class="toolTip">请先选择分公司，再选择分类</p>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <!-- @change="handleChange"  -->
                <el-input-number v-model="ruleForm.sort" controls-position="right"></el-input-number>
            </el-form-item>
            <!-- <el-form-item label="广告位" prop="ad_pic">
                <upload-single-img :imgUrl="ruleForm.ad_pic" @removeImg="removeImg(2, $event)"
                    @handleSuccess="handleSuccess(2, $event)" ref="upload"></upload-single-img>
                <p class="toolTip">
                    建议使用尺寸：534*250，否则图片会拉伸变形，影响美观
                </p>
            </el-form-item> -->
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="2">
                </el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="onSubmit('ruleForm')" :disabled="isDisabled"
                :loading="isLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { addCategory, categoryTwoList } from "@/api/goods";
import UploadSingleImg from "@/components/uploadSingleImg.vue";
export default {
    components: {
        UploadSingleImg,
    },
    name: "addCate",
    props: {},
    data() {
        return {
            visible: false,
            isDisabled: false,
            isLoading: false,
            ruleForm: {
                name: "",
                parent_id: "",
                image: "",
                sort: 100,
                company_id: "",
                status: 1,
                ad_pic: "",
            },
            parent_id: '',
            compony: [],
            cateList: [],
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入分类名称",
                        trigger: "blur",
                    },
                ],
                image: [
                    {
                        required: true,
                        message: "请上传分类图片",
                        trigger: "blur",
                    },
                ],
                company_id: [
                    {
                        required: true,
                        message: "请选择分公司",
                        trigger: "blur",
                    },
                ],
                parent_id: [
                    {
                        required: true,
                        message: "请选择上级分类",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() { },
    methods: {
        add() {
            this.visible = true;
        },
        //获取全部分类
        getCateTwoList() {
            categoryTwoList({
                company_id: this.ruleForm.company_id,
            }).then((res) => {
                if (res.code == 0) {
                    this.cateList = res.data;
                }
            });
        },
        handleSelect(e) {
            console.log("e", e);
            this.ruleForm.company_id = e;
            this.getCateTwoList();
        },
        handleCascaderChange() {
            this.$nextTick(() => {
                this.$refs.cascader.toggleDropDownVisible(false);
            });
        },
        clear() {
            this.ruleForm = {
                name: "",
                parent_id: "",
                image: "",
                sort: 100,
                company_id: "",
                ad_pic: "",
                status: 1,
            };
            this.cateList = []
        },
        async onSubmit(formName) {
            if (this.ruleForm.parent_id.length <= 1) {
                this.ruleForm.parent_id = this.ruleForm.parent_id[0]
            } else {
                this.ruleForm.parent_id = this.ruleForm.parent_id[this.ruleForm.parent_id.length - 1]
            }
            console.log("this.ruleForm", this.ruleForm);
            this.isDisabled = true;
            this.isLoading = true;
            let res = await this.$getCsrToken();
            if (res.code == 0) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addCategory(this.ruleForm).then((res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.clear();
                                this.close();
                                this.$emit("reload");
                                this.isDisabled = false;
                                this.isLoading = false;
                            } else {
                                this.isDisabled = false;
                                this.isLoading = false;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
        close() {
            this.visible = false;
        },
        removeImg(type, e) {
            if (type == 1) {
                this.ruleForm.image = ''
            } else {
                this.ruleForm.ad_pic = ''
            }
        },
        handleSuccess(type, e) {
            if (type == 1) {
                this.ruleForm.image = e;
            } else {
                this.ruleForm.ad_pic = e;
            }
        },
    },
};
</script>

<style scoped>
.tip {
    font-size: 12px;
    color: red;
}
</style>